import * as React from 'react';
import * as ReactDOM from 'react-dom';


    var Page = React.createClass({
        getDefaultProps: function () {
            return {
                isDaochu: false,
                page: {
                    currentPage: 2,  //当前页
                    total: 25,        //总条数
                    totalPages: 5     //总页数
                }
            };
        },
        getInitialState: function () {
            return { inPage: this.props.page.currentPage }
        },
        toPage: function (page) {
            //console.log("跳转page:" + page);


            if(page>this.props.page.totalPages){
                return false
            }else {
                this.props.actions.toPage(page);
            }
        },
        changePagesize: function (pagesize) {
            this.props.actions.changePagesize(pagesize);
        },
        handleChange: function (event) {
            var value = event.target.value.substr(0, 140)
            this.setState({ "inPage": value });
        },
        onStatusChange: function () {
            //console.error("永远不会执行")
        },
        componentDidMount: function () {
            this.unsubscribe = this.props.store.listen(this.onStatusChange);
        },
        componentWillUnmount: function () {
            this.unsubscribe();
        },
        render: function () {
            if (!this.props.page) {
                return (<div></div>)
            }
            var currentPage =parseInt(this.props.page.currentPage) , total = this.props.page.total,
                totalPages = this.props.page.totalPages, $btns = [];
            var prevState = currentPage <= 1 ? true : false;
            var nextState = totalPages > currentPage ? false : true;


            // var startNum = totalPages-currentPage<5?(currentPage<5?1:totalPages-currentPage):currentPage
            var startNum = totalPages - currentPage < 5 ? (currentPage <= 4 ? 1 : totalPages - 4) : currentPage
            console.log("开始页数 :" + startNum);

            // for (var i = currentPage; i <= totalPages && i < currentPage + 5; i++) {
            for (var i = startNum; i <= totalPages && i < currentPage + 5; i++) {
                if (i == currentPage) {
                    $btns.push(<BtnPage pageIndex={i} disabled={true} key={i} handClik={this.toPage}/>);
                } else {
                    $btns.push(<BtnPage pageIndex={i} disabled={false} key={i} handClik={this.toPage}/>);
                }
            }

            return (
                <div className="container-page">
                    <div className="page-right">
                        <label>总条数：{this.props.page.total}条</label>
                        {(() => {
                            if (this.props.isDaochu) {
                                return (
                                    <button className="btn btn-page-up">导出</button>
                                )
                            }
                        })() }
                    </div>
                    <div className="page-left">
                        {(() => {
                            if (this.props.changePagesize) {
                                return (
                                    <div className="page-jump-auto">
                                        <SelectPage changePagesize={this.changePagesize}/>
                                    </div>
                                );
                            }
                        })() }
                        <div className="page-jump">
                            <span className="page-btn" data-enable={prevState}><i   className="iconfont icon-pagelisticonfirst" onClick={this.toPage.bind(this,1)}></i></span>
                            <span className="page-btn" data-enable={prevState}><i   className="iconfont icon-pagelisticonlast" onClick={this.toPage.bind(this,currentPage-1)}></i></span>

                            <div className="page-jump-auto">跳至
                                <input className=" page-input" defaultValue={currentPage} onChange={this.handleChange}/>页
                                <span className="page-btn" onClick={this.toPage.bind(this,this.state.inPage)}>GO</span>
                            </div>

                            <span className="page-btn" data-enable={nextState} onClick={this.toPage.bind(this,currentPage+1)}><i   className="iconfont icon-pagelisticonnext"></i></span>
                            <span className="page-btn" data-enable={nextState} onClick={this.toPage.bind(this,totalPages)}><i className="iconfont icon-pagelisticonlast2"></i></span>
                            <span className="page-num">
                                {currentPage}/{this.props.page.totalPages}
                            </span>
                        </div>
                    </div>

                </div>
            )
        }
    });

    var BtnPage = React.createClass({
        handClik: function () {
            this.props.handClik(this.props.pageIndex);
        },
        render: function () {
            return (
                <button onClick={this.handClik} className="btn btn-page-num" disabled={this.props.disabled}>{this.props.pageIndex}</button>
            )
        }
    });





   var SelectPage = React.createClass({
        handleChange: function (event) {
            this.props.changePagesize(event.target.value);
        },
        render: function () {
            return (
                <select style={ {height: '27px'} } onChange={this.handleChange}>
                    <option value="20">20/页</option>
                    <option value="30">30/页</option>
                    <option value="50">50/页</option>
                    <option value="100">100/页</option>
                </select>
            )
        }
    })

    module.exports =  Page;
